import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import { Textarea, InputNumber, Modal, RadioGroup, Radio, UploadDragger } from 'ant-design-vue'
import { UploadOutlined } from '@ant-design/icons-vue'

@Component
export class AddBlackListPop extends Render {
    showModal = false
    fileList = []
    @Prop({ default: false }) show!: boolean
    // @Prop() basicInfo!: LongInsuranceCaseListDto<ReportCaseResultDto>
    @Emit('update:show')
    showChange(val: boolean) {return val}

    @Emit('refresh')
    handleRefresh() {}

    @Watch('show', { immediate: true })
    async handleWatchShow() {
        this.showModal = this.show
        // if (this.show) {
        //     this.basicInfo.isVisible = 1
        //     initModelValue(this.formConfig, this.basicInfo)
        // }
    }
    
    @Watch('showModal', { immediate: true })
    handleWatchShowDialog() {
        this.showChange(this.showModal)
    }

    render() { 
        return (
            <>
                <Modal v-model:open={ this.showModal } title="加入黑名单">
                    <div>
                        <div class="flex items-center w-full mt-8">
                            <div class="text-[#3D3D3D] text-base"> <span class="text-[#FF4D4F]">* </span> 是否保留出险人员：</div>
                            <RadioGroup>
                                <Radio value="1">保留</Radio>
                                <Radio value="2">不保留</Radio>
                            </RadioGroup>
                        </div>
                        <div class="w-full mt-20">
                            <div class="text-[#3D3D3D] text-base"> <span class="text-[#FF4D4F]">* </span> 录入原因：</div>
                            <div class=" mt-8 flex-1">
                                <Textarea class="text-base" autosize={ { minRows: 5, maxRows: 5 } }  placeholder="请输入录入原因" ></Textarea>
                            </div>
                        </div>
                        <div class="w-full mt-8">
                            <UploadDragger
                                v-model:fileList={ this.fileList }
                                name="file"
                                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                            >
                                <div class="text-black-100 text-base">
                                    <UploadOutlined class="mr-8"/>
									上传附件 <span class="text-sm text-black-300">（选填）</span>
                                </div>
                            </UploadDragger>
                        </div>
                        <div class="w-full mt-8 text-black-300 text-sm">
                            文件大小不超过5Mb
                        </div>
                        {/* <div class="flex items-center mt-8">
                            <div class="opacity-0 w-84">超龄人数：</div>
                            <div class="mt-8 text-black-300 text-sm">该客户可投保的超龄人数为 <span class="text-black-200">4</span> 人，超出人次将投保不成功</div>
                        </div> */}
                    </div>
                </Modal>
            </>
        )
    }

}

export default toNative<{}, {}>(AddBlackListPop)